{% extends "View/layout.html" %}
{% block title %}Index{% endblock %}
{% block head %}
    {{ super() }}
    <script src='/_ah/channel/jsapi'></script>
{% endblock %}

{% block content %}


<div class="form-horizontal">

  				{% if message != None %}
        		 <div class="alert alert-info">
        		 {{ message.decode('utf-8') }}
				</div>
        		 {% endif %}



  <div class="form-group">
    <label class="col-sm-2 control-label">Zkratka Předmětu</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.subject }}</p>
    </div>
  </div>

  <div class="form-group">
    <label class="col-sm-2 control-label">Předmět plny název</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.subjectFull }}</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Jméno učitele</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.teacher.firstName }}</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Příjmení učitele</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.teacher.lastName }}</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label"> Místnost</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.chamber }}</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Datum</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.date.date }}</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Čas od</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.timeStart }}</p>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">Čas do</label>
    <div class="col-sm-10">
      <p class="form-control-static">{{ deadline.timeEnd }}</p>
    </div>
  </div>

<form action="/admin/deadlineDetail" method="post">
    <input type="hidden" value="{{ deadline.deadlineID }}" name="deadlineID"/>

        <div class="form-group">
        <div class="row">
        	<div data-text-value='{"check" : "Zapsán","unCheck" : "Nezapsán"}'
        		 data-text="textSignIn" 
        		 id="animated-checkbox" 
        		 data-id="signIn" 
        		 {% if deadline.signIn == true %}
        		 	class="checkbox check is-checked"
        		 {% else %} 
        		 	class="checkbox check" 
        		 {% endif %}
            >            	    	        	            	
        	</div>
        	<div id="textSignIn" style="display: flex;height: 80px;margin-top: 50px;font-size: 2em;">
        	{% if deadline.signIn == true %} 
        		Zapsán 
        	{% else %} 
        		Nezapsán 
        	{% endif %}        		
        	</div>
        </div>
          <input type="checkbox" id="signIn" style="display:none" name="signIn" 
          {% if deadline.signIn == true %}
          	checked
          {% endif %}/>
        </div>

    <input style="margin-top: 10px;" class="btn btn-danger" type="submit" value="uložit">
</form>

</div>

<a style="margin-top: 10px;" class="btn btn-default" href="/admin/"> Zpět na index </a>

<script type='text/javascript'>

      onOpened = function() {
          console.log('onOpened');
        //sendMessage('/opened');
      };

      onMessage = function(response) {
          console.log('onMessage payload' + response.data);

          var object = JSON.parse(response.data)

          if(object.type != '{{ SIGN_IN_OUT }}') return;

          document.getElementById("signIn").checked = object.signIn;
          
          $('#animated-checkbox').trigger('click');
      }

      onError = function(){
          console.log('onError');
      }

      onClose = function(){
          console.log('onClose');
      }

      sendMessage = function(path, opt_param) {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', path, true);
        xhr.send();
      };

      openChannel = function() {
        var token = '{{ token }}';
        var channel = new goog.appengine.Channel(token);
        var handler = {
          'onopen': onOpened,
          'onmessage': onMessage,
          'onerror': onError,
          'onclose': onClose
        };
        var socket = channel.open(handler);
        socket.onopen = onOpened;
        socket.onmessage = onMessage;
      }

      initialize = function() {
        openChannel();
      }

      setTimeout(initialize, 100);
      
      $(document).ready(function(){
    	  
    	  $('#textSignIn').on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(e){
    		  $(this).removeClass('animated')
    		  $(this).removeClass('shake')
    		  
    	  });
    	  
      })

    </script>

{% endblock %}